<template>
  <div>
    <!-- <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 3.7 14.52"
      class="svg-1"
    >
      <path class="cls-11" d="M0,0,3.7,2.07V12.44L0,14.52Z" />
    </svg>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 3.7 14.52"
      class="svg-1"
    >
      <path class="cls-11" d="M0,0,3.7,2.07V12.44L0,14.52Z" />
    </svg> -->
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 3.7 14.52"
      class="svg-1"
    >
      <path class="cls-11" d="M0,0,3.7,2.07V12.44L0,14.52Z" />
    </svg>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 45.55 22.87"
      class="svg-2"
    >
      <path class="cls-1 top-right-path" d="M36.24,4.57h3.91V20.83l-3.91-3Z" />
      <path class="cls-1 top-right-path11" d="M29.38,4.57H33.3v12.2l-3.92-3Z" />
      <path class="cls-1 top-right-path12" d="M22.52,4.57h3.92V12.7l-3.92-3Z" />
      <path
        class="cls-2"
        id="top-right-path4"
        d="M0,9.65C14.07,9.65,7.75.5,21.55.5h23.5V22.87"
      />
    </svg>
    <ul class="top-btn-bg-group">
      <li class="top-btn-item" ref="firstPageBg"></li>
      <li class="top-btn-item" ref="secondPageBg"></li>
    </ul>
    <ul class="top-btn-group">
      <li
        class="top-btn-item hy-lingxinti"
        @click="menuClick('firstPage')"
        ref="firstPage"
      >
        Tab副标题1
      </li>
      <li
        class="top-btn-item hy-lingxinti"
        @click="menuClick('secondPage')"
        ref="secondPage"
      >
        Tab副标题2
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'topRight',
  data() {
    return {}
  },
  mounted() {
    this.$nextTick(() => {
      let routeName = this.$route.name
      this.menuClick(routeName)
    })
  },
  watch: {
    $route: {
      handler: function(to, from) {
        if (from.path == '/') return
        this.menuClick(to.name)
      }
    }
  },
  methods: {
    init() {
      let tl = new TimelineMax()
      let tw1 = TweenMax.staggerTo(
        '.top-btn-bg-group .top-btn-item',
        0.3,
        {
          opacity: 1,
          ease: Power2.easeInOut
        },
        0.1
      )
      let tw2 = TweenMax.staggerTo(
        '.top-btn-bg-group .top-btn-item',
        0.3,
        {
          scaleX: 1,
          ease: Power2.easeInOut
        },
        0.1
      )

      let tw3 = TweenMax.staggerTo(
        '.top-btn-bg-group .top-btn-item',
        0.3,
        {
          scaleY: 1,
          ease: Power2.easeInOut
        },
        0.1
      )
      let tw4 = TweenMax.staggerTo(
        '.top-btn-group .top-btn-item',
        0.3,
        {
          opacity: 1,
          y: '+=10',
          ease: Power2.easeInOut
        },
        0.1
      )
      let tw5 = TweenMax.staggerTo(
        '.svg-1',
        0.3,
        { opacity: 1, scaleY: 1, ease: Power2.easeInOut },
        0.2
      )
      let tw60 = TweenMax.set('.svg-2', { opacity: 1 })
      let tw6 = TweenMax.from('#top-right-path4', 0.5, {
        drawSVG: '0% 0%',
        ease: Power2.easeInOut
      })
      let tw7 = TweenMax.to('.top-right-path', 0.3, {
        opacity: 1,
        ease: Power2.easeInOut
      })
      let tw8 = TweenMax.to('.top-right-path11', 0.3, {
        opacity: 0.5,
        ease: Power2.easeInOut
      })
      let tw9 = TweenMax.to('.top-right-path12', 0.3, {
        opacity: 0.3,
        ease: Power2.easeInOut
      })
      tl.add(tw1, 0.2)
        .add(tw2, 0.5)
        .add(tw3, 0.8)
        .add(tw60, 0.6)
        .add(tw6, 0.6)
        .add(tw7, 0.8)
        .add(tw8, 0.8)
        .add(tw9, 0.8)
        .add(tw5, 0.9)
        .add(tw4, 1)
      return tl
    },
    menuClick(param) {
      this.$refs.firstPage.classList.remove('active')
      this.$refs.secondPage.classList.remove('active')
      this.$refs.firstPageBg.classList.remove('active')
      this.$refs.secondPageBg.classList.remove('active')
      this.$refs[param].classList.add('active')
      this.$refs[param + 'Bg'].classList.add('active')

      this.$router.push({ name: param })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../../assets/css/_lib-variable';
.svg-1 {
  position: absolute;
  width: 3.7px;
  height: 14.52px;
  top: 35px;
  left: 1227px;
  opacity: 0;
  transform: scaleY(0);
  &:nth-child(2) {
    left: 1453px;
  }
  &:nth-child(3) {
    left: 1679px;
  }
}
.svg-2 {
  position: absolute;
  width: 45.55px;
  height: 22.87px;
  top: 22px;
  left: 1182px;
  opacity: 0;
  .top-right-path {
    opacity: 0;
  }
}
.cls-11 {
  fill: #035ef0;
  fill-rule: evenodd;
}
.cls-1 {
  fill: #035ef0;
}
.cls-1,
.cls-2 {
  fill-rule: evenodd;
}
.cls-2 {
  fill: none;
  stroke: #035ef0;
  stroke-miterlimit: 10;
}
.top-btn-bg-group {
  position: absolute;
  width: 673px;
  height: 42px;
  top: 23px;
  right: 20px;
  .top-btn-item {
    width: 334px;
    height: 42px;
    float: left;
    margin-right: 5px;
    background: url('../../assets/imgs/topTitle/button-inactive.png');
    opacity: 0;
    transform: scale(0.3, 0.1);
    transition: background 0.35s ease-in-out;
    &.active {
      background: url('../../assets/imgs/topTitle/button-active.png');
    }
    &:nth-child(2) {
      margin-right: 0;
    }
  }
}
.top-btn-group {
  position: absolute;
  width: 673px;
  height: 42px;
  top: 23px;
  right: 20px;
  .top-btn-item {
    width: 334px;
    height: 42px;
    font-size: 18px;
    line-height: 42px;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    float: left;
    margin-right: 5px;
    opacity: 0;
    top: -10px;
    position: relative;
    cursor: pointer;
    transition: color 0.35s ease-in-out;
    &.active {
      color: rgba(255, 255, 255, 1);
    }
    &:nth-child(2) {
      margin-right: 0;
    }
  }
}
</style>
